<template>
    <div class="container lrlayout">
        <div class="row tp" v-if="datadesc.alignType === 'img'">
            <div class="img lf"><img :src="datadesc.img" alt=""></div>
            <div class="text" v-animate='"animated bounceInRight"'>
                <h2 class="title">{{datadesc.title}}</h2>
                <h3 class="intro">{{datadesc.intro}}</h3>
                <p class="desc">{{datadesc.desc}}</p>
                <button class="more" type="button">了解更多</button>
            </div>
        </div>
        <div class="row tp" v-else>
            <div class="text lf" v-animate='"animated bounceInLeft"'>
                <h2 class="title">{{datadesc.title}}</h2>
                <h3 class="intro">{{datadesc.intro}}</h3>
                <p class="desc">{{datadesc.desc}}</p>
                <button class="more" type="button">了解更多</button>
            </div>
            <div class="img"><img :src="datadesc.img" alt=""></div>
        </div>
    </div>
</template>
<script scoped type="text/ecmascript-6">
    export default {
        props: ['datadesc']
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
.lrlayout
    height 100%
    .tp
        display flex
        justify-content center
        align-items center
        height 100%
        margin-bottom 100px
        padding-top: 40px
        position relative
        .lf
            margin-right: 160px
        .img
            display: inline-block
            vertical-align: middle
            height: 100%
            text-align: center
            img
                max-width: 100%
                max-height: 100%
        .text
            display: inline-block
            vertical-align: middle
            width: 500px
            h2.title
                font-size 50px
                font-weight normal
                line-height 80px
            h3.intro
                font-size 36px
                font-weight normal
                line-height 50px
                margin-top 24px
            p.desc
                font-weight light
                line-height 40px
                margin-top 30px
            button.more
                display block
                width 160px!important
                height 30px!important
                min-height 30px
                background rgba(255,215,215,1)
                font-size 18px
                letter-spacing 4px
                color #fff
                font-weight medium
                line-height 24px
                margin-top 30px
                cursor pointer
@media screen and (max-width 1400px)
    .lrlayout
        .tp
            margin-bottom 80px
            padding-top: 25px
            .lf
                margin-right: 130px
            .text
                h2.title
                    font-size 36px
                    line-height 60px
                h3.intro
                    font-size 26px
                    line-height 40px
                    margin-top 18px
                p.desc
                    line-height 30px
                    margin-top 22px
                button.more
                    width 140px!important
                    height 28px!important
                    height 28px
                    font-size 16px
                    letter-spacing 3px
                    line-height 20px
                    margin-top 22px

@media screen and (max-width 1150px)
    .lrlayout
        .tp
            margin-bottom 60px
            padding-top: 20px
            .lf
                margin-right: 100px
            .text
                h2.title
                    font-size 30px
                    line-height 50px
                h3.intro
                    font-size 20px
                    line-height 32px
                    margin-top 16px
                p.desc
                    line-height 25px
                    margin-top 20px
                button.more
                    font-size 14px

@media screen and (max-width 450px)
    .lrlayout
        .tp
            margin-bottom 50px
            padding-top: 20px
            .lf
                margin-right: 100px
            .text
                h2.title
                    font-size 30px
                    line-height 50px
                h3.intro
                    font-size 20px
                    line-height 32px
                    margin-top 16px
                p.desc
                    line-height 25px
                    margin-top 20px
                button.more
                    font-size 14px
</style>
